body{
    background-color : whitesmoke;
    font-family: "微软雅黑";
    font-size: 16px;
}

#table{
    position: relative;
    display: table;
    padding-bottom: 1em;
    margin: 0.5em auto;
    overflow: hidden;
}

#box{
    float : left;
    width : 36em;
    height: 36em;
    background-color : burlywood;
    padding: 0.6em;
    border-radius: 0.6em;
    border : 1px solid #444;
    box-shadow: 1px 1px saddlebrown,2px 2px saddlebrown, 3px 3px #444, 5px 5px 7px gray;
}

.cube{
    float : left;
    width : 2.4em;
    height: 2.4em;
    position: relative;
}

.stone{
    z-index: 1;
    position: absolute;
    left: 0.15em;
    top : 0.15em;
    width : 2.0em;
    height : 2.0em;
    border-radius: 1em;
}

.select{
    position: absolute;
    top : 0.01em;
    left: 0.01em;
    width : 2.04em;
    height: 2.04em;
}

.cube:before{
    position: absolute;
    content: "";
    width : 2.4em;
    height: 1.2em;
    border-bottom : 1px solid sienna;
}

.cube:after{
    position: absolute;
    content: "";
    width : 1.2em;
    height: 2.4em;
    border-right : 1px solid sienna;
}


/*上边*/

.cubeTop{
    float : left;
    width : 2.4em;
    height: 2.4em;
    position: relative;
}

.cubeTop:before{
    position: absolute;
    content: "";
    width : 2.4em;
    height: 1.2em;
    border-bottom: 1px solid sienna;
}

.cubeTop:after{
    position: absolute;
    content: "";
    width : 1.2em;
    height: 1.2em;
    top : 1.2em;
    border-right : 1px solid sienna;
}

/*左上*/

.cubeTopRight{
    float : left;
    width : 2.4em;
    height: 2.4em;
    position: relative;
}

.cubeTopRight:before{
    position: absolute;
    content: "";
    width : 1.2em;
    height: 1.2em;
    border-bottom: 1px solid sienna;
}

.cubeTopRight:after{
    position: absolute;
    content : "";
    width : 1.2em;
    height: 1.2em;
    top : 1.2em;
    border-right : 1px solid sienna;
}

/*右侧*/
.cubeRight{
    float : left;
    width : 2.4em;
    height: 2.4em;
    position: relative;
}

.cubeRight:before{
    position: absolute;
    content: "";
    width : 1.2em;
    height: 1.2em;
    border-bottom : 1px solid sienna;
}

.cubeRight:after{
    position: absolute;
    content: "";
    width : 1.2em;
    height: 2.4em;
    border-right: 1px solid sienna;
}

/*右下*/

.cubeRightBottom{
    float : left;
    width : 2.4em;
    height: 2.4em;
    position: relative;
}

.cubeRightBottom:before{
    position: absolute;
    content: "";
    width : 1.2625em;
    height: 1.2em;
    border-bottom: 1px solid sienna;
}
.cubeRightBottom:after{
    position: absolute;
    content: "";
    width : 1.2em;
    height: 1.2em;
    border-right: 1px solid sienna;
}

/*下边*/
.cubeBottom{
    float : left;
    width : 2.4em;
    height: 2.4em;
    position: relative;
}

.cubeBottom:before{
    position: absolute;
    content: "";
    width : 2.4em;
    height: 1.2em;
    border-bottom: 1px solid sienna;
}

.cubeBottom:after{
    position: absolute;
    content: "";
    width : 1.2em;
    height: 1.2em;
    border-right : 1px solid sienna;
}

/*左下*/
.cubeLeftBottom{
    float : left;
    width : 2.4em;
    height: 2.4em;
    position: relative;
}

.cubeLeftBottom:before{
    position: absolute;
    content: "";
    width : 1.2em;
    height: 1.2em;
    left : 1.2em;
    border-bottom: 1px solid sienna;
}

.cubeLeftBottom:after{
    position: absolute;
    content: "";
    width : 1.2em;
    height: 1.2em;
    border-right: 1px solid sienna;
}

/*左侧*/
.cubeLeft{
    float : left;
    width : 2.4em;
    height: 2.4em;
    position: relative;
}
.cubeLeft:before{
    position: absolute;
    content: "";
    width : 1.2em;
    height: 1.2em;
    left : 1.2em;
    border-bottom: 1px solid sienna;
}

.cubeLeft:after{
    position: absolute;
    content: "";
    width : 1.2em;
    height: 2.4em;
    border-right: 1px solid sienna;
}

/*左上*/
.cubeLeftTop{
    float : left;
    width : 2.4em;
    height: 2.4em;
    position: relative;
}

.cubeLeftTop:before{
    position: absolute;
    content: "";
    width : 1.2em;
    height: 1.2em;
    left : 1.2em;
    border-bottom: 1px solid sienna;
}

.cubeLeftTop:after{
    position: absolute;
    content: "";
    width : 1.2em;
    height: 1.2em;
    top : 1.2em;
    border-right: 1px solid sienna;
}




#rightBar{
    padding: 1em 0;
    text-align: center;
    margin: 0.5em;
    margin-left : 1em;
    float : left;
    width : 8em;
    height: 17em;
    background-color : rgba(100,100,100,0.2);
    box-shadow: 2px 2px 2px gray;
}

#gamestart, #gameover,#goBack,#AI{
    margin: 0.5em 0;
    padding: 0.2em;
    width : 5em;
    display: inline-block;
    background-color : orange;
    cursor: default;
    box-shadow: 1px 1px 3px #555;
    cursor: pointer;
    z-index: 2;
}

#gamestart:hover,#gameover:hover,#goBack:hover,#AI:hover{
    background-color : peru;
}

#gamestart:active,#gameover:active,#goBack:active,#AI:active{
    box-shadow: none;
}

#winbox{
    z-index: 2;
    display: none;
    position: relative;
    text-align: center;
    width : 18em;
    height: 10em;
    position: absolute;
    left : 9.6em;
    top : 12.30em;
    border : 1px solid black;
    background-color : rgba(255,255,255,0.8);
    border-radius: 0.6em;
    box-shadow: 3px 3px 5px gray, -3px 3px 5px gray;
}

#winInfo{
    position: absolute;
    top : 1.6em;
    left : 2.5em;
    font-size: 200%;
}

#close{
    color : #444;
    font-weight: bold;
    position: absolute;
    display: inline-block;
    padding: 0.22em 0.4em;
    width : 3em;
    left: 7.1em;
    top : 6.8em;
    background-color: gold;
    border-radius: 0.2em;
    border : 1px solid #777;
    cursor: pointer;
    box-shadow: 0 0 3px gray;
}

#close:hover{
    background-color : orange;
}

#close:active{
    box-shadow: none;
}

#startbox{
    display: none;
    z-index: 3;
    position: relative;
    text-align: center;
    width : 18em;
    height: 10em;
    line-height: 10.2em;
    position: absolute;
    left : 9.6em;
    top : 12.30em;
    border : 1px solid black;
    background-color : rgba(255,255,255,0.8);
    border-radius: 0.6em;
    box-shadow: 3px 3px 5px gray, -3px 3px 5px gray;
}

#stinfo{
    height: 0;
    z-index: 3;
    font-weight: bold;
    position: absolute;
    left: 7.1em;
    top : -3.2em;
}


#blackFirst,#whiteFirst{
    color : #444;
    font-weight: bold;
    z-index: 4;
    margin: 0.3em 0.8em;
    padding: 0.25em 0.35em;
    border-radius: 0.2em;
    width : 5em;
    background-color : gold;
    border : 1px solid #777;
    cursor: pointer;
    box-shadow : 0 0 3px gray;
}

#blackFirst:hover,#whiteFirst:hover{
    background-color : orange;
}

#blackFirst:active,#whiteFirst:active{
    box-shadow: none;
}


#clue{
    margin: 0 auto;
    margin-bottom: 0.5em;
    width : 5.4em;
    height: 3em;
    background-color : chocolate;
    box-shadow: 1px 1px 3px #555;
}

#clue #info{
    float : left;
    margin: 0.1em 0.3em;
    font-size: 50%;
}

#clue #cluetext{
    color : white;
}

#timebox{
    text-shadow: 2px 2px 1px #777;
    margin: 0.5em auto;
    padding: 0.2em;
    background-color : rgba(100,100,100,0.4);
    width : 5em;
}